<template>
  <div>
    <div
      class="item"
      v-for="(item, index) of list"
      :key="index"
    >
      <div class="item-title border-bottom">
        <span class="item-title-icon">
          <img src="../../../../static/images/1.png" />
        </span>
        <span class="item-title-text">{{item.title}}</span>
      </div>

      <div v-if="item.children" class="item-chilren">
        <detail-list :list="item.children"></detail-list>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'DetailList',
  props :{
    list: Array
  }


}
</script>
<style scoped>
  .item {
    line-height: 40px;
    position: relative;
    width:100%;
    overflow: hidden;
  }
  .item-title-icon {
   width: 22px;
   height: 22px;
   top: 5px;
   position: absolute;
 }
  .item-title {
    width: 100%;
    overflow: hidden;
  }
  .item-title .item-title-text {
    margin-left: 30px;
    width: 100%;
    overflow: hidden;
  }
  .item-chilren {
    padding: 0 10px;
  }
</style>
